.body-section {
    font-family: Arial, sans-serif;
    flex-direction: column;
    height: 100vh;
    background-image: linear-gradient(to top, #000000 0%, #ffffff 100%);
    background-attachment:fixed;
    overflow-x:hidden;
    /* hidden会无法滑动 */
}

/* 广告begin */
.ad {
    height: 150px;
    width: 101%;
    overflow: hidden;
    top: -76.5px;
    left: -7.5px;
    position: relative;
}

.ad img {
    height: 150px;
    width: 100%;
    position: absolute;
}

/* 广告end */

.user {
    width: 101%;
    height: 30px;
    top: -7.5px;
    left: -7.5px;
    position: relative;
    background-color: #b2e5ee;
    border-radius: 10px;
}

.user ul {
    list-style-type: none;
    /* 移除默认的列表样式 */
    margin: 0;
    /* 移除默认的外边距 */
    padding: 0;
    /* 移除默认的内边距 */
    display: inline-block;
    margin-top: 3px;
    /* 调节ul高位置 */
}

.user li {
    display: inline-block;
    /* 让 li 元素水平排列 */
    vertical-align: middle;
    /* 垂直居中对齐 */
    font-weight: bold;
}

.user li:first-child {
    display: inline-block;
    margin-left: 60px;
    margin-right: 0px;
    vertical-align: middle;
    font-weight: bold;
    /* 示例：设置为粗体 */
}

.user li a {
    text-decoration: none;
    /* 取消下划线 */
}


.user p {
    display: inline-block;
    vertical-align: top;
    margin-top: 3px;
    padding-left: 800px;
    /* 调整位置 */
}

.icon {
    /* float: left; */
    height: 72px;
    width: 101px;
    top: -10px;
    left: -7.5px;
    position: relative;
    /* background-color: orange; */
    background-image: url('../images/icon.jpg');
    background-size: cover;
    /* 确保图片覆盖整个元素，可能会被裁剪 */
}

header {
    /* float: left; */
    width: 92%;
    top: -78px;
    right: -93px;
    position: relative;
    background-color: #333;
    color: white;
    padding: 10px 20px;
}

.navbar {
    display: flex;
    justify-content: space-around;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.navbar li {
    flex: 1;
    /* 确保每个li元素平均分配空间 */
    display: flex;
    /* 使用flex布局 */
    justify-content: center;
    /* 水平居中内容 */
    align-items: center;
    /* 垂直居中内容 */
}

.navbar a {
    color: white;
    text-decoration: none;
    padding: 12px;
    border-radius: 5px;
    transition: background-color 0.3s, border-bottom-color 0.3s;
    border-bottom: 3px solid transparent;
    /* 初始化无底边颜色 */
    width: 100%;
    /* 确保a标签占满整个li */
    text-align: center;
    /* 文本居中显示 */
}

.navbar a:hover,
.navbar a:focus {
    background-color: #555;
    border-bottom: 3px solid #ff0;
}

/* 分隔线 */
.navbar li:not(:first-child) {
    border-left: 1px solid #555;
    /* 在第一个li之后的每个li左侧添加分隔线 */
}


.item-intro-body{
    display: flex;
    background-color: #4d4a4a;
    width: 1000px;
    height: auto;
    margin: 30px auto;
}

.item-img{
    margin: 30px auto;
}

.item-img > img{
    width: 300px;
    justify-content: center; /* 水平居中 */
}

.item-word {
    margin-top: 20px;
    margin: auto;
    color: #ffffff;
}
.item-word-btn{
    display: flex;
    margin-top: 20px;
}

/* .item-word-btn a{

} */

button{
    background-color: #e6912c;

}

.detail-info{
    margin-left: 30px;
}
.engine-web-foot{
    background-color: #000000;
}

.common-txt,.common-txt s{
    display: flex;
    color: #ffffff;
    justify-content: center; /* 水平居中 */
    margin: 5px;
    font-size:small;
}

/* 结尾围棋旋转展示 begin */
.shell {

    display: flex;
    align-items: center;
    justify-content: end;
    position: relative;
    width: 100vw;
    height: 30vw;
    margin: 0;
    color: #ffffff;
    perspective: 1000px;
    transform-origin: center;
}

.content {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform-style: preserve-3d;
    transform: translateZ(-30vw) rotateY(0);
    animation: carousel 18s infinite cubic-bezier(0.77, 0, 0.175, 1) backwards;
}

.item {
    position: absolute;
    width: 60vw;
    height: 40vw;
    max-width: 380px;
    max-height: 250px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    background-size: cover;
    -webkit-box-reflect: below 25px -webkit-linear-gradient(transparent 50%, rgba(255, 255, 255, 0.3));
}

.item:nth-child(1) {
    background-image: url(../images/wq1.jpg);
    transform: rotateY(0) translateZ(30vw);
}

.item:nth-child(2) {
    background-image: url(../images/wq2.jpg);
    transform: rotateY(72deg) translateZ(30vw);
}

.item:nth-child(3) {
    background-image: url(../images/wq3.jpg);
    transform: rotateY(144deg) translateZ(30vw);
}

.item:nth-child(4) {
    background-image: url(../images/wq4.jpg);
    transform: rotateY(216deg) translateZ(30vw);
}

.item:nth-child(5) {
    background-image: url(../images/wq5.jpg);
    transform: rotateY(288deg) translateZ(30vw);
}

@keyframes carousel {

    0%,
    16.7% {
        transform: translateZ(-30vw) rotateY(0);
    }

    16.7%,
    33.4% {
        transform: translateZ(-30vw) rotateY(-72deg);
    }

    33.4%,
    50.1% {
        transform: translateZ(-30vw) rotateY(-144deg);
    }

    50.1%,
    66.8% {
        transform: translateZ(-30vw) rotateY(-216deg);
    }

    66.8%,
    83.5% {
        transform: translateZ(-30vw) rotateY(-288deg);
    }

    83.5%,
    100% {
        transform: translateZ(-30vw) rotateY(-360deg);
    }
}
